<!--
 * @Author: 冯本桥
 * @Date: 2025-02-13 13:53:56
 * @LastEditTime: 2025-02-28 11:28:54
 * @LastEditors: 冯本桥
 * @Description: 培训课程管理
 * @FilePath: \teach_system_fe\src\views\teacherManagement\teacherTraining.vue
-->
<template>
  <div v-loading="loading">
    <div class="header-search cad-box">
      <el-input
        v-model="nameDate"
        style="width: 20%"
        clearable
        placeholder="请输入课程名称"
      />
      <el-button
        type="primary"
        style="margin-left: 20px"
        @click="onSubmit"
      >确定</el-button>
    </div>
    <div class="content-table cad-box">
      <el-button
        style="margin-bottom: 20px"
        type="primary"
        @click="addTeacher"
      >新增课程</el-button>

      <el-table
        :data="tableData"
        style="width: 100%; margin: 30px 0"
        :header-cell-style="{
          backgroundColor: '#fafafc',
          color: '#000000',
        }"
      >
        <el-table-column
          v-for="(item, index) in config.teacherTrainingTable"
          :key="index"
          :prop="item.key"
          :label="item.name"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <span
              v-if="item.slot"
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <el-tag v-if="scope.row[item.key] !== 0" type="danger">{{
                tableSlotValue(item.options, scope.row[item.key])
              }}</el-tag>
              <el-tag v-else type="success">{{
                tableSlotValue(item.options, scope.row[item.key])
              }}</el-tag>
            </span>
            <span v-else>{{
              scope.row[item.key] != null ? scope.row[item.key] : "-"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              style="color: #006be7"
              type="text"
              size="small"
              @click="addSublevel(scope.row.id, scope.row.name)"
            >
              添加章节
            </el-button>
            <el-button
              style="color: #7fc73c"
              type="text"
              size="small"
              @click="info(scope.row)"
            >
              详情
            </el-button>
            <el-button type="text" size="small" @click="edit(scope.row)">
              编辑
            </el-button>
            <el-button
              style="color: #ff5757"
              type="text"
              size="small"
              @click="deleteLists(scope.row.id)"
            >
              删除
            </el-button>
            <el-button
              v-if="scope.row.status"
              style="color: #77778c"
              type="text"
              size="small"
              @click="shield(scope.row, 0)"
            >
              启用
            </el-button>
            <el-button
              v-else
              style="color: #77778c"
              type="text"
              size="small"
              @click="shield(scope.row, 1)"
            >
              屏蔽
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right">
        <el-pagination
          :current-page="pagination.pageNum"
          :page-sizes="[10, 15, 30, 50]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawer"
      :before-close="beforeClose"
      :destroy-on-close="true"
      :wrapper-closable="false"
      custom-class="add-drawer"
    >
      <div style="padding: 0 20px">
        <From-page
          ref="addFromRef"
          :label-width="null"
          :rules="rules"
          :from-config="config.addTrainingFrom"
          :but-show="false"
          :disabled-from="disabledFrom"
          @submitForm="submitForm"
        />
        <div
          v-if="!disabledFrom"
          style="margin-top: 300px; float: right; margin-right: 15px"
        >
          <el-button type="primary" @click="drawerAdd">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import * as config from './config'
import FromPage from '@/components/Basic/FromPage/index'
import {
  getCourseList,
  addCourseList,
  deleteList
} from './api/teacherTraining'
export default {
  components: {
    FromPage
  },
  data () {
    return {
      config: config,
      drawerTitle: '',
      drawer: false,
      loading: false,
      nameDate: '',
      disabledFrom: false,
      tableData: [],
      pagination: {
        pageNum: 0,
        pageSize: 10
      },
      total: 0,
      rules: {
        name: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
        courseCover: [
          { required: true, message: '请上传课程封面', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    tableSlotValue () {
      return (data, value) => {
        return data.find((item) => item.value * 1 === value * 1)?.label || ''
      }
    }
  },
  created () {
    this.getTableDate()
  },
  mounted () {},
  methods: {
    onSubmit () {
      console.log('确定')
      this.getTableDate()
    },

    async getTableDate () {
      this.loading = true
      try {
        const siz = JSON.parse(JSON.stringify(this.pagination.pageNum))
        const res = await getCourseList({
          name: this.nameDate,
          type: 4,
          ...this.pagination,
          pageNum: siz ? siz - 1 : siz
        })
        console.log(res)
        this.tableData = res.content
        this.total = res.totalElements
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },

    async addTableList (value) {
      try {
        await addCourseList({ ...value, type: 4 })
        this.$message.success('成功')
        this.beforeClose()
        this.getTableDate()
      } catch (error) {
        console.log(error)
      }
    },

    async deleteDateList (id) {
      this.loading = true
      try {
        await deleteList({
          courseId: id
        })
        this.$message.success('删除成功')
        this.getTableDate()
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },

    addTeacher () {
      console.log('新增课程')
      this.drawerTitle = '新增课程'
      this.disabledFrom = false
      this.drawer = true
    },

    addSublevel (id, name) {
      this.$router.push({
        path: '/teacherManagement/teacherTrainingInfo',
        query: {
          id: id,
          name: name
        }
      })
    },

    info (value) {
      this.drawerTitle = '详情'
      this.disabledFrom = true
      this.drawer = true
      const a = JSON.parse(JSON.stringify(value))
      this.$nextTick(() => {
        this.$refs.addFromRef.formDate = a
      })
    },

    edit (value) {
      console.log('编辑')
      this.drawerTitle = '编辑'
      this.disabledFrom = false
      this.drawer = true
      const a = JSON.parse(JSON.stringify(value))
      this.$nextTick(() => {
        this.$refs.addFromRef.formDate = a
      })
    },

    deleteLists (id) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteDateList(id)
        })
        .catch(() => {})
    },

    shield (value, key) {
      console.log('屏蔽')
      this.$confirm('是否确认屏蔽?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.addTableList({ ...value, status: key })
        })
        .catch(() => {})
    },

    beforeClose () {
      try {
        this.$refs.addFromRef.resetFields()
        this.$refs.addFromRef.formDate = {}
      } catch (error) {
        console.log(error)
      }
      this.drawer = false
    },
    submitForm (formName) {
      if (formName !== '') {
        formName.priority = formName.priority * 1 || ''
        const { area, city, province, ...list } = formName
        console.log(area, city, province)

        this.addTableList(list)
      }
    },

    drawerAdd () {
      this.$refs.addFromRef.submitForm()
    },

    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.getTableDate()
    },

    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.getTableDate()
    }
  }
}
</script>

<style scoped lang="scss">
.header-search {
  display: flex;
  margin-bottom: 30px;
}
</style>
